<template>
  <view class="detail-page">

    <!-- 商品图片 -->
    <image 
      class="product-image" 
      :src="productDetail.image" 
      mode="aspectFill"
    ></image>
    <!-- 商品信息 -->
    <view class="product-info">
      <text class="product-name">{{ productDetail.name }}</text>
      <text class="product-price">价格：¥{{ productDetail.price.toFixed(0) }}</text>
      <view class="tags">
        <text 
          class="tag" 
          v-for="(tag, idx) in productDetail.tags" 
          :key="idx"
        >{{ tag }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      productDetail: {} // 存储商品详情数据
    }
  },
  onLoad(options) {
    // 从路由参数获取商品 ID
    const productId = options.id; 
    // 模拟根据 ID 查找商品（从 discover.vue 的 products 数组里找 ）
    const mockProducts = [
      { 
        id: 1, 
        name: "紫檀木沙发五件套", 
        price: 89999, 
        image: "/static/products/sofa1.png", 
        tags: ["新中式", "爆款"],
        categories: ['sofa'] 
      },
      { 
        id: 2, 
        name: "黄花梨茶台", 
        price: 15800, 
        image: "/static/products/tea-table.png", 
        tags: ["古典", "收藏级"],
        categories: ['tea'] 
      },
      {
        id: 3, 
        name: "黄花梨茶台", 
        price: 30800, 
        image: "/static/products/tea-table2.png", 
        tags: ["花梨木", "高级感"],
        categories: ['tea'] 
      },
      {
        id: 4, 
        name: "红木橱柜", 
        price: 47800, 
        image: "/static/products/cab1.png", 
        tags: ["黄檀", "收藏级"],
        categories: ['cabinet'] 
      }
    ];
    // 根据 ID 匹配商品
    this.productDetail = mockProducts.find(item => item.id == productId);
    if (!this.productDetail) {
      uni.showToast({
        title: '商品不存在',
        icon: 'none'
      });
      // 跳转回发现页
      setTimeout(() => {
        uni.navigateBack();
      }, 1500);
    }
  },
  methods: {
    navBack() {
      uni.navigateBack();
    }
  }
}
</script>

<style scoped>
.detail-page {
  background-color: #f8f3ed;
  min-height: 100vh;
}
.header {
  display: flex;
  align-items: center;
  padding: 15px;
  background-color: #5c3c1c;
  color: #fff;
}
.back {
  font-size: 24px;
  margin-right: 10px;
  cursor: pointer;
}
.title {
  font-size: 18px;
  font-weight: bold;
}
.product-image {
  width: 100%;
  height: 300px;
}
.product-info {
  padding: 15px;
  background-color: #fff;
  margin: 15px;
  border-radius: 10px;
}
.product-name {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}
.product-price {
  font-size: 16px;
  color: #e60012;
  margin-bottom: 10px;
}
.tags {
  display: flex;
  flex-wrap: wrap;
}
.tag {
  background-color: #f8f3ed;
  color: #5c3c1c;
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 5px;
  margin-right: 5px;
  margin-bottom: 5px;
}
</style>